<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>员工信息</title>
        <script src="../jquery/jquery-3.6.0.min.js"></script>
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="../css/staffManage.css">
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <form class="navbar-form navbar-left">
                    <button id="btn_Add" type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal2">新增人员</button>
                </form>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <!-- <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li> -->
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="部门、职务">
                        </div>
                        <button type="submit" class="btn btn-default btn-select">查找</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <form class="navbar-form navbar-left">
                            <button type="submit" class="btn btn-default btn-selectAll">全部</button>
                        </form>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>



        <table class="table table-hover">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>所属部门</th>
                    <th>职务</th>
                    <th>工牌</th>
                    <th>主要工作</th>
                    <th>电话</th>
                    <th>QQ</th>
                    <th>邮箱</th>
                    <th>出生日期</th>
                    <th>学历</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <div id="fenye">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li id="pre">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <!-- <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li> -->
                    <li id="next">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <!-- 删除 -->
        <!-- <div class="container-fluid" id="arryDelete">
            <div class="row">
                <div class="col-xs-8 col-sm-6 col-md-4 col-lg-2" style="background-color: #2AABD2;">
                    <button type="button" class="btn btn-primary btn-quxiao">取消</button>
                </div>
                <div class="col-xs-4 col-sd-6 col-md-4 col-lg-2" style="background-color: #8A6D3B;">
                    <button type="button" class="btn btn-danger btn-delete">确认</button>
                </div>
            </div>
        </div> -->
        
       <!-- Button trigger modal -->
      <!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
         Launch demo modal
       </button> -->
       
       <!-- Modal -->
       <div class="modal fade" id="myModaldelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
           <div class="modal-content">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               <h4 class="modal-title" id="myModalLabel">Modal title</h4>
             </div>
             <div class="modal-body">
               确定要删除吗？
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-primary btn-quxiao" data-dismiss="modal">取消</button>
               <button type="button" class="btn btn-danger btn-delete" data-dismiss="modal">确定</button>
             </div>
           </div>
         </div>
       </div>
       <!-- 修改 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">修改</h4>
                    </div>
                    <div class="modal-body">
                        <form action="">
                            <div class="form-group">
                                <label for="exampleInputEmail1">编号:</label>
                                <input id="number" type="text" style="pointer-events: none;" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">姓名：</label>
                                <input id="name" type="text" class="form-control">
                            </div>
                            <label for="sex">性别:</label>
                            <select id="sex" name="">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                            <label for="department">所属部门:</label>
                            <select id="department" name="">
                                <option value="1">院长办公室</option>
                                <option value="2">教学部</option>
                            </select>
                            <label for="staff">职务:</label>
                            <select id="staff" name="">
                                <option value="1">园长</option>
                                <option value="2">班主任</option>
                            </select>
                            <select id="education" name="">
                                <option value="1">研究生</option>
                                <option value="2">本科</option>
                            </select>
                            <div class="form-group">
                                <label for="exampleInputPassword1">工牌:</label>
                                <input id="idcard" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">主要工作</label>
                                <input id="content" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">电话：</label>
                                <input id="tel" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">QQ:</label>
                                <input id="qq" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">邮箱:</label>
                                <input id="mail" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">出生日期:</label>
                                <input id="birthdata" type="text" class="form-control">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button id="quxiao" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="queren" type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                    </div>
                </div>
            </div>
        </div><!-- /.modal -->
        
        <!-- 添加 -->
        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel2">添加</h4>
                    </div>
                    <div class="modal-body">
                        <form action="">
                            <div class="form-group">
                                <label for="exampleInputEmail1">编号:</label>
                                <input id="numberAd" type="text" style="pointer-events: none;" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">姓名：</label>
                                <input id="nameAd" type="text" class="form-control">
                            </div>
                            <label for="sexAd">性别:</label>
                            <select id="sexAd" name="">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                            <label for="departmentAd">所属部门:</label>
                            <select id="departmentAd" name="">
                                <option value="1">院长办公室</option>
                                <option value="2">教学部</option>
                            </select>
                            <label for="staffAd">职务:</label>
                            <select id="staffAd" name="">
                                <option value="1">园长</option>
                                <option value="2">班主任</option>
                            </select>
                            <select id="educationAd" name="">
                                <option value="1">研究生</option>
                                <option value="2">本科</option>
                            </select>
                            <div class="form-group">
                                <label for="exampleInputPassword1">工牌:</label>
                                <input id="idcardAd" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">主要工作</label>
                                <input id="contentAd" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">电话：</label>
                                <input id="telAd" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">QQ:</label>
                                <input id="qqAd" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">邮箱:</label>
                                <input id="mailAd" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">出生日期:</label>
                                <input id="birthdataAd" type="text" class="form-control">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button id="quxiaoAd" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="querenAd" type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="../data/data.js"></script>
        <script src="../js/staffManage.js"></script>
        <script src="../bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>
